import React, { useEffect, useState } from "react";
import styles from "./PurchasList.module.css";
import PurchaseBtn from "@/components/Purchase/PurchaseBtn/PurchaseBtn";
import PurchaseSelect from "@/components/Purchase/PurchaseSelect/PurchaseSelect";
import PurchaseDatePicker from "@/components/Purchase/PurchaseDatePicker/PurchaseDatePicker";
import PurchaseInput from "@/components/Purchase/PurchaseInput/PurchaseInput";
import PurchaseTable from "@/components/Purchase/PurchaseTable/PurchaseTable";
import { Button } from "antd";
import axios from "axios";
import {
  AntDelBtnModal,
  AntFollowBtnModal,
  AntWorkSheetModal,
} from "@/components/Purchase/PurchaseOperate/PurchaseOperate";
import onExportBasicExcel from "../../../utils/derive";
import { useNavigate } from "react-router-dom";

function PayList() {
  const [Select1, setSelect1] = useState("pay-all");
  const [Select2, setSelect2] = useState("receiving-all");
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [tableDataTotal, setTableDataTotal] = useState(0);

  const navigate = useNavigate();

  const paymentData = [
    {
      value: "pay-all",
      label: "全部",
    },
    {
      value: "pay-await",
      label: "待付款",
    },
    {
      value: "pay-paid",
      label: "已付款",
    },
    {
      value: "pay-cencel",
      label: "已取消",
    },
  ];

  const consignmentData = [
    {
      value: "receiving-all",
      label: "全部",
    },
    {
      value: "receiving-await",
      label: "待收货",
    },
    {
      value: "receiving-paid",
      label: "已收货",
    },
    {
      value: "receiving-cencel",
      label: "已完成",
    },
  ];

  const tableColumns = [
    {
      title: "订单编号",
      dataIndex: "PurchaseNum",
      key: "PurchaseNum",
    },
    {
      title: "商品名称",
      dataIndex: "SupplierName",
      key: "SupplierName",
    },
    {
      title: "应入库数量",
      dataIndex: "PurchasePrice",
      key: "PurchasePrice",
    },
    {
      title: "已入库数量",
      dataIndex: "PurchasePayState",
      key: "PurchasePayState",
    },
    {
      title: "状态",
      dataIndex: "PurchaseDeliverState",
      key: "PurchaseDeliverState",
    },
    {
      title: "创建时间",
      dataIndex: "PurchaseCreateTime",
      key: "PurchaseCreateTime",
    },
    {
      title: "操作",
      key: "operation",
      render: (row, record) => {
        return (
          <>
            <Button
              className={styles.table_operation_button}
              size="small"
              onClick={() => { goDetail(record)}}
            >
              编辑
            </Button>
            <AntDelBtnModal id={record} fn={delData}></AntDelBtnModal>
          </>
        );
      },
    },
  ];

  const tableMultOperationSelectOption = [
    {
      value: "setAllPaied",
      label: "设为已付款",
    },
    {
      value: "setAllDelivered",
      label: "设为已发货",
    },
    {
      value: "setAllFollow",
      label: "批量跟进",
    },
    {
      value: "setAllWork",
      label: "批量工单",
    },
    {
      value: "setAllDel",
      label: "批量删除",
    },
  ];

  let [tableData, setTableData] = useState([]);
  let [allData, setAllData] = useState([]);

  function initPurchaseListData() {
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/purchaselist",
      params: {
        currentPage: "1",
      },
      method: "POST",
    })
      .then((res) => {
        setAllData(res.data.alldata);
        setTableData(res.data.data);
        setTableDataTotal(res.data.total);
      })
      .catch((err) => {
        console.log("请求失败");
        console.error(err);
      });
  }

  function purchaseListData(value) {
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/purchaselist",
      params: {
        currentPage: value,
      },
      method: "POST",
    })
      .then((res) => {
        setTableData(res.data.data);
        // console.log(4, res.data.data);
      })
      .catch((err) => console.error(err));
  }

  useEffect(() => {
    initPurchaseListData();
  }, []);

  const onSelect1 = (payment) => {
    setSelect1(payment);
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/search",
      params: {
        payment: payment,
      },
      method: "POST",
    })
    .then((res) => {
      // console.log(res)
      setAllData(res.data.data);
      setTableData(res.data.data);
      setTableDataTotal(res.data.total);
    })
    .catch((err) => console.error(err));
  };

  const onSelect2 = (consignment) => {
    setSelect2(consignment);
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/search",
      params: {
        consignment: consignment,
      },
      method: "POST",
    })
    .then((res) => {
      // console.log(res)
      setAllData(res.data.data);
      setTableData(res.data.data);
      setTableDataTotal(res.data.total);
    })
    .catch((err) => console.error(err));
  };

  const delData = (num) => {
    // console.log(num);
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/del",
      params: {
        PurchaseDelNumber: num,
      },
      method: "POST",
    })
      .then((res) => {
        setAllData(res.data.alldata);
        setTableData(res.data.data);
        setTableDataTotal(res.data.total);
      })
      .catch((err) => console.error(err));
  };

  const goDetail = (num) => {
    navigate("/Procurement/create", { state: { id: num.key } });
    // console.log(num.key);
  };

  return (
    <div className={styles.payList}>
      <div className={styles.payList_title}>
        <div className={styles.payList_titleHeading}>采购合同</div>
        <div className={styles.payList_titleBtn}>
          <PurchaseBtn>导入</PurchaseBtn>
          <PurchaseBtn
            BtnType="primary"
            fn={() => {
              onExportBasicExcel(tableColumns, allData, "订单列表");
            }}
          >
            导出
          </PurchaseBtn>
        </div>
      </div>
      <div className={styles.payList_search}>
        <div className={styles.payList_searchLeft}>
          <PurchaseSelect
            title="发货状态"
            data={consignmentData}
            onSelects={onSelect2}
            values={Select2}
          ></PurchaseSelect>
          <PurchaseDatePicker title="日期选择"></PurchaseDatePicker>
          <PurchaseInput placeholderText="供应商名称/采购订单合同编号"></PurchaseInput>
        </div>
      </div>
      <div>
        <PurchaseTable
          tableColumns={tableColumns}
          data={tableData}
          tableMultOperationSelectOption={tableMultOperationSelectOption}
          multSelectChange={setSelectedRowKeys}
          multSelect={selectedRowKeys}
          tableDataReq={purchaseListData}
          tableDataTotal={tableDataTotal}
        ></PurchaseTable>
      </div>
    </div>
  );
}

export default PayList;
